<script setup lang="ts">
import { listOverview } from "@/services/green-wave";
import { inject, shallowRef, watchEffect } from "vue";
import { SYMBOL_INDEX_PROVIDER } from "../constants";
import { useGreenWaveStore } from "@/store/green-wave";
import { storeToRefs } from "pinia";
import { DATE_FORMAT } from "@/const";

const tableData = shallowRef([]);

const store = useGreenWaveStore();
const { weekRange, currentRoad } = storeToRefs(store);

watchEffect(async () => {
    if (weekRange.value?.length !== 2) {
        return;
    }
    const [start, end] = weekRange.value;
    const data = (await listOverview({
        startDate: start?.format(DATE_FORMAT),
        endDate: end?.format(DATE_FORMAT),
    })) as any;
    tableData.value = data;
});

const { driveMap, updateRoad } = inject<any>(SYMBOL_INDEX_PROVIDER);
function handleRowClick(row: any) {
    driveMap(row.id);
    store.updateRoad(row);
    updateRoad(row);
}

function rowClassName(data: { row: any; rowIndex: number }) {
    if (data.row.id === currentRoad.value?.id) {
        return "row row-active";
    }
    return "row";
}

function speedFormatter(_: any, __: any, cellValue: any, ___: any) {
    return Math.round(cellValue);
}

function vRoll(el: any) {
    if (!el) return;
    if (el.getBoundingClientRect()?.width < el.scrollWidth) {
        el.classList.add("rolling");
    } else {
        el.classList.remove("rolling");
    }
}
</script>

<template>
    <div class="effect">
        <h3></h3>
        <el-table
            ref="table"
            class-name="table"
            :data="tableData"
            size="small"
            :row-class-name="rowClassName"
            header-row-class-name="row-header"
            cell-class-name="table-cell"
            :cell-style="{ background: 'transparent' }"
            :header-cell-style="{ backgroundColor: 'rgba(255,255,255,0.17)' }"
            style="width: 100%"
            @row-click="handleRowClick"
        >
            <el-table-column
                :width="40"
                align="center"
                prop="index"
                label="序号"
            >
                <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="干线名称">
                <template #default="scope">
                    <span v-roll class="roll-container">
                        <span>{{ scope.row.name }}</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                :width="80"
                sortable
                class-name="congestion-row"
                align="center"
                prop="passingRate"
                label="通过率%"
            >
                <template #default="scope">
                    <span
                        v-if="scope.row.passingRate"
                        class="tag"
                        :class="{
                            high: scope.row.passingRate > 70,
                            commonly:
                                scope.row.passingRate >= 40 &&
                                scope.row.passingRate <= 70,
                            low: scope.row.passingRate < 40,
                        }"
                        ><span>{{ scope.row.passingRate }}</span></span
                    >
                </template>
            </el-table-column>
            <el-table-column
                :width="120"
                class-name="speed-col"
                :formatter="speedFormatter"
                align="center"
                prop="speed"
                label="平均速度 (km/h)"
            ></el-table-column>
        </el-table>
    </div>
</template>

<style lang="scss" scoped>
.effect {
    height: 218px;
    > h3 {
        height: 38px;
        margin-bottom: 20px;
        background-image: url(../../../assets/bg_title_green_wave_effect.png);
        background-size: cover;
    }
}

.table {
    --el-table-tr-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-border-color: transparent;
    --el-table-header-text-color: #fff;
    --el-table-text-color: #fff;

    font-size: 14px;

    :deep(.el-table__row) {
        height: 38px;
    }

    :deep(.row) {
        height: 30px;
        cursor: pointer;

        &.row-active,
        &:hover {
            background-color: #0b385e;
        }
    }

    :deep(.row-header) {
        .cell {
            padding: 0;
        }
    }

    :deep(.speed-col) {
        color: #4bc6ff;
    }

    :deep(.table-cell) {
        --el-color-primary: #31f7ff;

        .cell {
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    :deep(.congestion-row .cell) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    :deep(.sorting),
    :deep(.delay-col) {
        color: #31f7ff;
    }

    :deep(.not-sorting) {
        color: #fff;
    }

    .icon-rank {
        width: 20px;
        height: 24px;
        vertical-align: bottom;
    }

    .tag {
        padding: 0 12px;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        line-height: 20px;
        span {
            width: 3em;
            display: inline-block;
            text-align: center;
        }
        &.low {
            color: rgba(255, 77, 77, 1);
            border-color: rgba(255, 77, 77, 1);
            background: rgba(255, 77, 77, 0.2);
        }
        &.commonly {
            color: rgba(246, 189, 22, 1);
            border-color: rgba(246, 189, 22, 1);
            background: rgba(246, 189, 22, 0.2);
        }
        &.high {
            color: rgba(90, 216, 166, 1);
            border-color: rgba(90, 216, 166, 1);
            background: rgba(90, 216, 166, 0.2);
        }
    }

    .type {
        display: inline-flex;
        align-items: center;
        img {
            width: 14px;
            height: 14px;
            margin-left: 2px;
        }
    }
}

.roll-container {
    --animation-duration: 5s;

    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    &.rolling {
        span {
            display: inline-block;
            padding-left: 100%;
            animation: marquee var(--animation-duration) linear infinite;
        }
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
</style>
